<template>
  <div :class="{box:true,nightBg:isNight}">
    <!-- <a :class="{isNight:isNight,isDay:!isNight}" @click="gotoBlogDetail"> -->
    <router-link  :to="{path:'/home/blogDetail', query:{'id':content.id}}" :class="{isNight:isNight,isDay:!isNight}">
      <div class="img">
        <img :src="content.firstPicture"></img>
        <div class="content">
          <h1>
            {{content.title}}
          </h1>
          <div class="description">
            {{content.description}}
          </div>
        </div>
      </div>
      <div class="bottom_msg">
        <div class="riqi">
          <span class="iconfont icon-riqi"></span>
            {{content.createTime | time}}
        </div>
        <span class="iconfont icon-guankan"></span>{{content.views}}
      </div>
    </router-link>
  </div>
</template>

<script>
  export default {
    props:["content"],
    data(){
      return {
        isNight:false
      }
    },
    created(){
      //判断当前时间
      let hour = new Date().getHours()
      if(hour > 6 && hour < 18){
        this.isNight = false
      }else{
        this.isNight = true
      }
    }
  }
</script>

<style scoped>
  .nightBg{
    background-color: #292929 !important;
  }
  .isNight{
    color:#ccc !important;
  }
  .isDay{
    color:black;
  }
  .box{
    border-radius:10px;
    border:1px solid #ccc;
    padding:20px;
  }
  .box .img{
    width:100%;
    height:265px;
  }
  .box .img img{
    width:50%;
    height:250px;
    float:left;
  }
  .box .img .content{
    width:50%;
    margin-top:25px;
    float:left;
    line-height:30px;
    text-align:center;
    box-sizing: border-box;
    padding-left:20px;
    /* color:black; */
  }
  .box .img .content .description{
    width:100%;
    /*超过700px宽度时自动换行*/
    white-space:normal;

    /*超过行数时用...替代*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden; 
    text-overflow:ellipsis;
    text-indent: 2em;
    text-align: left;
  }
  .box h1{
    margin:6px;;
    margin-left:15px;
    padding:0;
    font-size:1.5rem;
  }
  .bottom_msg{
    /* color:black; */
  }
  .bottom_msg .riqi{
    margin-right:66px;
    display:inline-block;
  }
  .bottom_msg span{
    margin-right:10px;
  }
/* 去除router-view中的下划线 */
  a {
    text-decoration: none;
  }
  .router-link-active {
    text-decoration: none;
  }
</style>